{{ header }}
<div id="account-comment" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row">
    {{ column_left }}
    {% if column_left and column_right %}
      {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
      {% set class = 'col-sm-9' %}
    {% else %}
      {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">
      {{ content_top }}
      <h2>{{ heading_title }}</h2>
      <form action="{{ action }}" method="post" enctype="multipart/form-data" class="form-horizontal">
        {% if error_warning %}
        <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
          <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
        {% endif %}
        <div class="form-group">
          <label class="col-sm-2 control-label">{{ entry_rating }} </label>
          <div class="col-sm-10 review-star">
            <i class="fa fa-star-o"></i>
            <i class="fa fa-star-o"></i>
            <i class="fa fa-star-o"></i>
            <i class="fa fa-star-o"></i>
            <i class="fa fa-star-o"></i>
            <input type="hidden" name="rating" value="{{ rating }}">
          </div>
        </div>
        <div class="form-group required">
          <label class="col-sm-2 control-label" id="input-review">{{ entry_comment }} </label>
          <div class="col-sm-10">
            <textarea name="comments" rows="6" placeholder="{{ entry_review }}" id="input-review" class="form-control">{{ comments }}</textarea>
            {% if error_review %}
              <div class="text-danger">{{ error_review }}</div>
            {% endif %}
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" id="input-review">{{ entry_image }} </label>
          <div class="col-sm-10">
            <div class="container-fluid">
              <div class="row" id="review-img">
                {% for image in images %}
                  <div class="col-sm-2">
                    <div class="camera">
                      <img src="{{ image['image'] }}" class="img-responsive">
                      <i class="fa fa-remove del-image"></i>
                      <input type="hidden" name="images[]" value="{{ image['src'] }}">
                    </div>
                  </div>
                {% endfor %}
                <div class="col-sm-2" id="comment-img-btn">
                  <a href="javascript:;" class="camera" id="comment-upload"><img src="catalog/view/theme/default/image/camera.png" class="img-responsive"></a>
                </div>
                <input type="file" name="comment-file" id="comment-file" class="comment-upload" style="display: none;"/>
              </div>
            </div>
          </div>
        </div>
        <div class="buttons clearfix">
          <div class="pull-left"><a href="{{ back }}" class="btn btn-default">{{ button_back }}</a></div>
          <div class="pull-right">
            <input type="submit" value="{{ button_continue }}" class="btn btn-primary" />
          </div>
        </div>
      </form>
      {{ content_bottom }}
    </div>
    {{ column_right }}
  </div>
</div>
<script type="text/javascript">
  function getPoint()
  {
    var point = $('input[name="rating"]').val();
    point = parseInt(point);
    if (isNaN(point)) {
      point = 0;
    }
    return point;
  }
  function setStar() {
    var point = getPoint();
    var index = point - 1;
    $('.review-star i').each(function () {
      if ($(this).index() <= index) {
        $(this).prop('class', 'fa fa-star');
      } else {
        $(this).prop('class', 'fa fa-star-o');
      }
    });
  }
  function setPoint(p) {
    var point = parseInt(p);
    if (isNaN(point)) {
      point = 0;
    }
    $('input[name="rating"]').val(point);
  }
  $(function () {
    setStar();
    $('.review-star i').click(function () {
      var point = $(this).index() + 1;
      setPoint(point);
    });
    $('.review-star i').hover(function () {
      $(this).prop('class', 'fa fa-star');
      $(this).prevAll('i').prop('class', 'fa fa-star');
      $(this).nextAll('i').prop('class', 'fa fa-star-o');
    }, function () {
      var point = getPoint();
      if (!point) {
        $(this).prop('class', 'fa fa-star-o');
        $(this).prevAll('i').prop('class', 'fa fa-star-o');
        $(this).nextAll('i').prop('class', 'fa fa-star-o');
      } else {
        var index = point - 1;
        $('.review-star i').each(function () {
          if ($(this).index() <= index) {
            $(this).prop('class', 'fa fa-star');
          } else {
            $(this).prop('class', 'fa fa-star-o');
          }
        });
      }
    });
  });
  // Upload image
  $(document).on('click', '#comment-upload', function () {
    $('.comment-upload').click();
  });

  $(document).on('change', '.comment-upload', function () {
    var $this = $(this);
    var file = $this.val();
    if (file) {
      var id = $(this).attr('id') + Date.parse(new Date());
      uploadComment($this.attr('id'));
      $('.comment-upload').remove();
      $('#review-img').append('<input class="comment-upload" type="file" name="' + id + '" id="' + id + '" style="display: none;">');
    }
  });

  function uploadComment(id) {
    var load_index = layer.load(0, {
      shade: [0.1,'#000']
    });
    $.ajaxFileUpload({
      url: 'index.php?route=account/comment/upload',
      type: 'post',
      secureuri: false,
      fileElementId: id,
      dataType: 'json',
      success: function(json) {
        layer.close(load_index);
        var code = json['code'];
        if (code) {
          var image_html = '';
          image_html += '<div class="col-sm-2">';
          image_html += '<div class="camera">';
          image_html += '<img src="' + json['image'] + '" class="img-responsive">';
          image_html += '<i class="fa fa-remove del-image"></i>';
          image_html += '<input type="hidden" name="images[]" value="' + json['url'] + '">';
          image_html += '</div>';
          image_html += '</div>';
          $('#comment-img-btn').before(image_html);
        } else {
          layer.msg(json['msg']);
        }
      },
      error: function(data, status, e) {
        console.log(e);
      }
    });
  }

  $(document).on('click', '.camera .del-image', function () {
    var $this = $(this);
    var confirm_layer = layer.confirm('{{ text_confirm }}', {
      btn: ['{{ text_sure }}','{{ text_cancel }}'] //按钮
    }, function(){
      layer.close(confirm_layer);
      $this.parent('.camera').parent('div').remove();
    }, function(){

    });
  });
</script>
{{ footer }}